<template>
  <el-dialog
      v-model="dialogVisible"
      title=""
      width="50%"
      :before-close="handleClose"
      @open="beforeOpen"
      ref="dialog"
  >
    <el-form ref="form" label-width="130px" :model="form" :rules="formRules">
      <el-form-item label="请假开始时间" prop="startTime">
        <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="YYYY-MM-DD hh:mm:ss">
        </el-date-picker>
      </el-form-item>
     <el-form-item label="请假结束时间" prop="endTime">
       <el-date-picker
           v-model="form.endTime"
           type="datetime"
           placeholder="选择日期时间"
           value-format="YYYY-MM-DD hh:mm:ss"
       >
       </el-date-picker>
      </el-form-item>
     <el-form-item label="请假理由" prop="reason">
        <el-input type="textarea" v-model="form.reason" placeholder="请输入请假理由" :rows="4"></el-input>
      </el-form-item>
      <el-form-item label="请假天数" prop="days">
        <el-input-number v-model="form.days" />
      </el-form-item>
      <el-form-item label="请假类型" prop="leaveType">
        <el-select v-model="form.leaveType" placeholder="Select" size="large">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleOk"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElLoading } from 'element-plus'
export default {
  name: "TLeaveApplyDialog.vue",
  props: {
    dialogVisibleProp: {
      type: Boolean,
      required: true,
      default: false
    },
    editForm: {
      type: Object,
      required: false
    },
    callBackFunc: {
      type: Function,
      required: false,
      default: () => {
      }
    }
  },
  watch: {
    dialogVisibleProp: {
      immediate: true,
      handler(val) {
        this.dialogVisible = val;
      }
    }
  },
  data() {
    return {
      options: [{
        value: '年假',
        label: '年假'
      },{
        value: '事假',
        label: '事假'
      },{
        value: '丧假',
        label: '丧假'
      },{
        value: '病假',
        label: '病假'
      }],
      imageUrl: '',
      dialogVisible: false,
      form: {},
      formRules: {
         id: {
            required: true,
            message: '请输入主键',
            trigger: 'blur'
         }
         ,startTime: {
            required: true,
            message: '请输入请假开始时间',
            trigger: 'blur'
         }
         ,endTime: {
            required: true,
            message: '请输入请假结束时间',
            trigger: 'blur'
         }
         ,reason: {
            required: true,
            message: '请输入请假理由',
            trigger: 'blur'
         }
         ,leaveType: {
            required: true,
            message: '请输入请假类型',
            trigger: 'blur'
         }
         ,createTime: {
            required: true,
            message: '请输入创建时间',
            trigger: 'blur'
         },days: {
          required: true,
          message: '请输入请假天数',
          trigger: 'blur'
        }
      }
    }
  },
  methods: {
    beforeOpen() {
      this.form = {};
      if (this.editForm) {
        this.form = this.editForm;
      }
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let loadingInstance = ElLoading.service({ target: this.$refs.dialog.dialogRef })
          if (this.form.id) {
            this.$http.put(`/flowableapi/t_leave_apply/edit`, this.form).then((res) => {
              res= res.data;
              if (res.success) {
                this.$message.success(res.message || '更新成功');
                if (this.callBackFunc) {
                  this.callBackFunc(res.data, 'edit');
                }
                this.handleClose();
              }
              loadingInstance.close()
            })
          } else {
            this.$http.post(`/flowableapi/t_leave_apply/add`, this.form).then((res) => {
              res= res.data;
              if (res.success) {
                this.$message.success(res.message || '保存成功');
                if (this.callBackFunc) {
                  this.callBackFunc(res.data, 'add');
                }
                this.handleClose();
              }
              loadingInstance.close()
            })
          }
        }
      })
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .el-form-item__content{
  text-align: left;
}
</style>
